
function ValueBox(id) {
	this.id = id;
}
ValueBox.prototype.init = function () {
	var lis = this.box().find("li");
	if (!lis.exists()) {
		this.add();
	}
	this.box().find("li").each(function () {
		var li = $(this);
		li.find("label").click(function () {
			li.remove();
		});
	});
};
ValueBox.prototype.box = function () {
	if (!this.cantainer || !this.cantainer.exists()) {
		this.cantainer = $("#" + this.id);
	}
	return this.cantainer;
};
ValueBox.prototype.add = function () {
	var valueBox = this;
	var box = this.box();
	var li = $("<li></li>").appendTo(box);
	var text = $("<span></span>").appendTo(li).css("margin-right", "10px").css("cursor", "pointer").hide().click(function () {
		valueBox.edit(li);
	});
	var label = $("<label>X</label>").appendTo(li).css("cursor", "pointer").hide().click(function () {
		li.remove();
	});
	var input = $("<input/>").attr("name", "values").appendTo(li);
	var ok = $("<input/>").attr("type", "button").attr("value", "ok").appendTo(li).click(function () {
		valueBox.ok(li);
	});
	var cancel = $("<input/>").attr("type", "button").attr("value", "cancel").appendTo(li).click(function () {
		valueBox.cancel(li);
	});
};
ValueBox.prototype.ok = function (li) {
	var value = li.find("input[name=values]").val();
	if (value == null || value == "") {
		alert("\u8bf7\u8f93\u5165\u5c5e\u6027\u503c\uff01");
		return;
	}
	li.find("input").hide();
	li.find("span").text(value).show();
	li.find("label").show();
};
ValueBox.prototype.cancel = function (li) {
	var text = li.find("span").text();
	if (text == "") {
		li.remove();
	} else {
		li.find("input[name=value]").val(text);
		this.ok(li);
	}
};
ValueBox.prototype.edit = function (li) {
	li.find("input").show();
	li.find("span").hide();
	li.find("label").hide();
};

